<template>
	<view>
		<u-navbar title="回收单管理" autoBack="true" bgColor="transparent" :titleStyle="{fontSize:'36rpx',fontWeight:'500'}">
		</u-navbar>
		<scroll-view class="container" scroll-y="true">
			<view class="order_item" @tap="goDetail(item.id)" v-for="(item,index) in list" :key="index">
				<view class="otitle">
					<view class="left">
						<u--text :text="'订单编号：'+item.no_recycle" size="14" color="#333" margin="0 0 28rpx 0"></u--text>
						<u--text :text="item.person+'  '+formatTime(item.datetime_recycle)" size="10"
							color="#999999"></u--text>
					</view>
					<view class="right">
						<view class="customTag" :class="type_tags[item.state_recycle]">
							<text>{{type_status[item.state_recycle]}}</text>
						</view>
					</view>
				</view>
				<view class="ocontent">
					<u--text prefixIcon="map" iconStyle="font-size: 28rpx;margin-right:16rpx;" size="12" color="#333"
						:text="item.address"></u--text>
					<u--text prefixIcon="phone" iconStyle="font-size: 28rpx;margin-right:16rpx;" margin="24rpx 0 0"
						size="12" color="#333" :text="item.person+item.mobile"></u--text>
					<view class="plist">
						<u--text :text="'循环托盘 '+item.category2+'A类'+item.num_recycle_a+'块'" margin="0 0 28rpx" size="12"
							color="#666"></u--text>
						<u--text :text="'循环托盘 '+item.category2+'B类'+item.num_recycle_b+'块'" margin="0 0 28rpx" size="12"
							color="#666"></u--text>
						<u--text :text="'循环托盘 '+item.category2+'C类'+item.num_recycle_c+'块'" margin="0 0 28rpx" size="12"
							color="#666"></u--text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	import {
		getUserOrders,
		getAddress
	} from "@/api/user.js";
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(["user"])
		},
		data() {
			return {
				list: [],
				type_status: {
					'00': "待审核",
					"01": "已驳回",
					"02": "已取消",
					"03": "已确认",
					"04": "已完结"
				},
				type_tags: {
					'00': "warningTag",
					"01": "errorTag ",
					"02": "cancelTag",
					"03": "primaryTag",
					"04": "successTag"
				}
			};
		},
		onLoad(option) {
			//("":全部，00：待审核，01：已驳回，02：已取消，03：已确认，04：已完结)
			getUserOrders({
				username: this.user.username,
				status: ""
			}).then(res => {
				this.list = res.data;
			}).catch(err => {
				console.error(err)
			})
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/recycle/detail?id=" + id
				})
			},
			formatTime(time) {
				return dayjs(time).format('YYYY-MM-DD')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_item {
		padding: 32rpx 28rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;

		.otitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid rgba(237, 237, 237, 0.9);
			padding-bottom: 32rpx;
			margin-bottom: 32rpx;

			.left {}

			.right {
				flex-shrink: 0;
				flex-grow: 0;
				width: 148rpx;
			}
		}

		.ocontent {
			padding: 0 28rpx;

			.plist {
				padding: 60rpx 28rpx 0;
			}
		}
	}
</style>
